<template>
  <div>
    <div class="ant-upload ant-upload-select ant-upload-select-picture-card" v-if="selection.length < (maxNum - defaultValue.length) && isPicType" @click="visible = true">
      <span class="ant-upload ant-upload-btn">
        <a-icon type="picture"/>
      <div class="ant-upload-text">相册选择</div>
      </span>
    </div>
    <a-button v-if="!isPicType" class="pic-select" @click="visible = true">
      <a-icon type="picture"/>
      相册选择
    </a-button>
    <a-modal
      title="选择图片"
      centered
      :width="1000"
      v-model="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="card-list" ref="content">
        <a-list
          :grid="{gutter: 24, lg: 6, md: 6, sm: 4, xs: 2}"
          :dataSource="lists"
          class="album-lists"
          
        >
          <a-list-item slot="renderItem" slot-scope="item" :class="selected(item)" @click="handleSelect(item)">
            <a-skeleton :loading="loading" active paragraph>
              <a-card
                hoverable
              >
                <img
                  :src="item.src"
                  slot="cover"
                />
              </a-card>
            </a-skeleton>
            <i></i>
            <a-icon type="check"/>
          </a-list-item>
        </a-list>
      </div>
      <Pagination :total="total" v-model="pageno" :pageSize.sync="pagesize" :showQuickJumper="false"  @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></Pagination>
    </a-modal>
  </div>
</template>

<script>
// import { albumLists } from '@/api/site';
import { album_pics } from '@/api/api.js';
import { showError } from '@/utils/showMsg';
import Pagination from '@/components/common/pagination.vue'

export default {
  name: 'AlbumLists',
  props: {
    defaultValue: Array,
    isPicType: {
      type: Boolean,
      default: true,
    },
    maxNum: {
      type: Number,
      default: 5,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  components: {
            Pagination
        },
  data() {
    return {
      visible: false,
      lists: [],
      loading: true,
      // pagination: {
      //   onChange: (page) => {
      //     this.getAlbumLists(page);
      //   },
      //   pageSize: 24,
      //   current: 1,
      //   total: 1,
      // },
      currentPage: 1, //当前页码
      total: 0, //定义初始有多少条数据
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      selection: [],
    };
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.getAlbumLists({page: this.pageno, limit: this.pagesize});
    });
  },
  methods: {
    async getAlbumLists() {
      const res = await album_pics({
        // no_filed: true,
        page: this.pageno, 
        limit: this.pagesize
      });
      this.loading = true;
      if (res.data.code == '200') {
        // console.log(res.data.data);
        this.lists = res.data.data.list;
        // this.pagination.current = res.data.result.current_page;
        this.total = res.data.data.total

        setTimeout(() => {
          this.loading = false;
        }, 1000);
      }
    },
    selected(item) {
      if (this.selection.indexOf(item.src) > -1) {
        return 'cur';
      }
      return '';
    },
    handleSelect(item) {
      if (this.multiple) {
        if (this.selection.length < (this.maxNum - this.defaultValue.length) || this.selection.indexOf(item.src) > -1) {
          if (this.selection.indexOf(item.src) === -1) {
            this.selection.push(item.src);
          } else {
            this.selection.splice(this.selection.indexOf(item.src), 1);
          }
        } else {
          showError(`最多只能添加${this.maxNum}张图片`);
        }
      } else {
        if (this.selection.length === 0) {
          this.selection.push(item.src);
        } else {
          this.selection.splice(0, 1);
          this.selection.push(item.src);
        }
      }
    },
    handleOk() {
      this.$emit('selected', this.selection);
      this.selection = [];
      this.visible = false;
    },
    handleCancel() {
      this.selection = [];
    },
    handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.pageno = pageno;
                this.pagesize = pagesize;
                this.getAlbumLists({ page: this.pageno, limit: this.pagesize })
                // this.querysyJyz(); //这个是向后台请求的数据函数
            },
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.pageno = current;
                this.pagesize = size;
                this.getAlbumLists({ page: this.pageno, limit: this.pagesize })
                // this.querysyJyz(); //这个是向后台请求的数据函数
            },
  },
};
</script>

<style lang="stylus" scoped>
>>> .ant-card-cover
  padding: 2px;

  img
    width: 100%;
    height: 130px;

>>> .ant-skeleton-title
  height: 120px;

.pic-select
  float: left;
  margin-left: 10px;

.card-list
  i
    display: none;

  .cur
    >>> .ant-list-item
      .ant-card-bordered
        border: 1px solid #108ee9;

      i
        display: block;
        position: absolute;
        border-bottom: 30px solid #108ee9;
        border-left: 30px solid transparent;
        width: 0px;
        height: 0px;
        bottom: 17px;
        right: 13px;

        svg
          position: absolute;
          color: #ffffff;
          font-size: 14px;
          top: 13px;
          right: 2px;
</style>
